<template>
  <div>
    <van-nav-bar
      title="拜访记录"
      right-text="新增"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-search
      v-model="value"
      shape="round"
      placeholder="客户名称/联系方式"
      show-action
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div
      class="bigbox"
      @click="cust(item.id)"
      v-for="item in visitList"
      :key="item.id"
    >
      <van-row>
        <van-col span="6"
          ><img src="../assets/img/合作伙伴.png" alt=""
        /></van-col>
        <van-col span="14">
          <div>
            <div class="cont">
              <span class="title">拜访标题</span>
              <span>{{ item.visitTitle }}</span>
            </div>
            <div class="cont">
              <span class="title">客户名称</span>
              <span>{{ item.custName }}</span>
            </div>
            <div class="cont">
              <span class="title">拜访时间</span>
              <span>{{ item.visitTime }}</span>
            </div>
          </div>
        </van-col>
        <van-col span="4">定期回访</van-col>
      </van-row>
    </div>
    <div class="foot" @click="moreClick" v-show="size == '3' ? true : false">
      <span>展示更多<van-icon name="arrow-down" /></span>
    </div>
  </div>
</template>

<script>
import { GetVisitListData } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      size: "3",
      //  标题
      visitList: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onClickRight() {
      this.$router.push("/newaddvisit");
    },
    onSearch(val) {
      console.log(val);
    },
    moreClick() {
      this.size = "20";
      GetVisitListData({
        keyword: this.value,
        current: "1",
        size: this.size,
      }).then((res) => {
        this.visitList = res.data.records;
      });
    },
    cust(val) {
      this.$router.push("/visitmessage?id=" + val);
    },
  },
  created() {
    GetVisitListData({
      keyword: this.value,
      current: "1",
      size: this.size,
    }).then((res) => {
      this.visitList = res.data.records;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
}
.bigbox {
  margin-top: 10px;
}
.van-row {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  .van-col--6 {
    background-color: #eee;
    padding: 5px;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .van-col--4 {
    text-align: center;
    border: 1px solid orange;
    border-radius: 5px;
    color: orange;
  }
}

.title {
  padding: 0 10px;
}
.cont {
  line-height: 24px;
}
.foot {
  background-color: #fff;
  text-align: center;
  span {
    line-height: 40px;
    color: blue;
  }
}
</style>